<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:replace="./widget/base"></div>
</head>
<body>
<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'west',split:true" style="width:25%">
        <div id="viewPageCategoryToolbar">
            <nimrod:security authority="/COMPONENT/USER/VIEW_PAGE/PAGE_ALL/VIEW_PAGE_CATEGORY_ADD_DIALOG">
                <a href="javascript:" class="easyui-linkbutton" iconCls="iconfont icon-plus" onclick="viewPageCategoryAddDialog();">新增</a>
            </nimrod:security>
            <nimrod:security authority="/COMPONENT/USER/VIEW_PAGE/PAGE_ALL/VIEW_PAGE_CATEGORY_EDIT_DIALOG">
                <a href="javascript:" class="easyui-linkbutton" iconCls="iconfont icon-edit" onclick="viewPageCategoryEditDialog();">编辑</a>
            </nimrod:security>
            <nimrod:security authority="/COMPONENT/USER/VIEW_PAGE/PAGE_ALL/VIEW_PAGE_CATEGORY_DELETE_ALL">
                <a href="javascript:" class="easyui-linkbutton" iconCls="iconfont icon-close" onclick="viewPageCategoryDeleteAll();">删除</a>
            </nimrod:security>
        </div>
        <table id="viewPageCategory"></table>
    </div>
    <div data-options="region:'center',split:true">
        <div id="viewPageToolbar">
            <nimrod:security authority="/COMPONENT/USER/VIEW_PAGE/PAGE_ALL/VIEW_PAGE_ADD_DIALOG">
                <a href="javascript:" class="easyui-linkbutton" iconCls="iconfont icon-plus" onclick="viewPageAddDialog();">新增</a>
            </nimrod:security>
            <nimrod:security authority="/COMPONENT/USER/VIEW_PAGE/PAGE_ALL/VIEW_PAGE_EDIT_DIALOG">
                <a href="javascript:" class="easyui-linkbutton" iconCls="iconfont icon-edit" onclick="viewPageEditDialog();">编辑</a>
            </nimrod:security>
            <nimrod:security authority="/COMPONENT/USER/VIEW_PAGE/PAGE_ALL/VIEW_PAGE_DELETE_ALL">
                <a href="javascript:" class="easyui-linkbutton" iconCls="iconfont icon-close" onclick="viewPageDeleteAll();">删除</a>
            </nimrod:security>
            <nimrod:security authority="/COMPONENT/USER/VIEW_PAGE/PAGE_ALL/VIEW_PAGE_API_DIALOG">
                <a href="javascript:" class="easyui-linkbutton" iconCls="iconfont icon-edit" onclick="viewPageApiDialog();">关联 API</a>
            </nimrod:security>
        </div>
        <table id="viewPage"></table>
    </div>
    <div data-options="region:'east',split:true" style="width:35%">
        <div id="viewPageComponentToolbar">
            <nimrod:security authority="/COMPONENT/USER/VIEW_PAGE/PAGE_ALL/VIEW_PAGE_COMPONENT_ADD_DIALOG">
                <a href="javascript:" class="easyui-linkbutton" iconCls="iconfont icon-plus" onclick="viewPageComponentAddDialog();">新增</a>
            </nimrod:security>
            <nimrod:security authority="/COMPONENT/USER/VIEW_PAGE/PAGE_ALL/VIEW_PAGE_COMPONENT_EDIT_DIALOG">
                <a href="javascript:" class="easyui-linkbutton" iconCls="iconfont icon-edit" onclick="viewPageComponentEditDialog();">编辑</a>
            </nimrod:security>
            <nimrod:security authority="/COMPONENT/USER/VIEW_PAGE/PAGE_ALL/VIEW_PAGE_COMPONENT_DELETE_ALL">
                <a href="javascript:" class="easyui-linkbutton" iconCls="iconfont icon-close" onclick="viewPageComponentDeleteAll();">删除</a>
            </nimrod:security>
            <nimrod:security authority="/COMPONENT/USER/VIEW_PAGE/PAGE_ALL/VIEW_PAGE_COMPONENT_API_DIALOG">
                <a href="javascript:" class="easyui-linkbutton" iconCls="iconfont icon-edit" onclick="viewPageComponentApiDialog();">关联 API</a>
            </nimrod:security>
        </div>
        <table id="viewPageComponent"></table>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        // 视图页面分类
        var columns = [
            {field: 'checkbox', checkbox: true},
            {field: 'id', title: 'ID'},
            {field: 'name', title: '分类名称'},
            {field: 'sort', title: '排序'},
            {field: 'remark', title: '备注'},
            {field: 'gmtModified', title: '更新时间'},
            {field: 'gmtCreated', title: '创建时间'}
        ];
        $('#viewPageCategory').treegrid(expressui.grid.create, {
            title: '视图页面分类',
            url: Url.User.Api.VIEW_PAGE_CATEGORY + '/list_all_parent',
            expandUrl: Url.User.Api.VIEW_PAGE_CATEGORY + '/list_all_by_parent_id?parentId={id}',
            columns: [columns],
            onCheck: function (row) {
                if (row) {
                    $('#viewPage').datagrid('reload', Url.User.Api.VIEW_PAGE + '/page_all_by_view_page_category_id?viewPageCategoryId=' + row.id);
                    $('#viewPageComponent').datagrid('loadData', []);
                }
            },
            onUncheck: function (index, row) {
                $('#viewPage').datagrid('loadData', []);
                $('#viewPageComponent').datagrid('loadData', []);
            }
        });

        // 视图页面
        columns = [
            {field: 'checkbox', checkbox: true},
            {field: 'id', title: 'ID'},
            {field: 'name', title: '页面名称'},
            {field: 'url', title: '请求地址（url）'},
            {field: 'authority', title: '权限（authority）'},
            {field: 'sort', title: '排序'},
            {field: 'remark', title: '备注'},
            {field: 'gmtModified', title: '更新时间'},
            {field: 'gmtCreated', title: '创建时间'}
        ];
        $('#viewPage').datagrid(expressui.grid.create, {
            title: '视图页面',
            columns: [columns],
            onCheck: function (index, row) {
                if (row) {
                    $('#viewPageComponent').datagrid('reload', Url.User.Api.VIEW_PAGE_COMPONENT + '/page_all_by_view_page_id?viewPageId=' + row.id);
                    }
            },
            onUncheck: function (index, row) {
                $('#viewPageComponent').datagrid('loadData', []);
            }
        });

        // 视图页面组件
        var VIEW_PAGE_COMPONENT_TYPE = [];
        columns = [
            {field: 'checkbox', checkbox: true},
            {field: 'id', title: 'ID'},
            {field: 'viewPageComponentType', title: '组件类型', formatter: function (value, row, index) {
                    return expressui.grid.formatter(value, VIEW_PAGE_COMPONENT_TYPE);
                }
            },
            {field: 'name', title: '组件名称'},
            {field: 'authority', title: '权限（authority）'},
            {field: 'sort', title: '排序'},
            {field: 'remark', title: '备注'},
            {field: 'gmtModified', title: '更新时间'},
            {field: 'gmtCreated', title: '创建时间'}
        ];
        $('#viewPageComponent').datagrid(expressui.grid.create, {
            title: '视图页面组件',
            columns: [columns],
            onBeforeLoad: function (param) {
                util.ajax({
                    url: Url.System.Api.DICTIONARY + '/list_all_by_key/VIEW_PAGE_COMPONENT_TYPE',
                    success: function (data) {
                        if (data) {
                            VIEW_PAGE_COMPONENT_TYPE = data;
                        }
                    }
                });
            }
        });
    });

    function viewPageCategoryAddDialog() {
        var viewPageCategory = $('#viewPageCategory').treegrid(expressui.grid.getCheckedOneNoCheckedOrShowAlert);
        if (!viewPageCategory) {
            return;
        }
        $('#viewPageCategoryAddDialog').dialog(expressui.dialog.create, {
            title: '新增视图页面分类',
            grid: {type: 'treegrid', selector: '#viewPageCategory'},
            href: Url.User.Page.VIEW_PAGE_CATEGORY + '/add_dialog',
            get: {url: Url.User.Api.VIEW_PAGE_CATEGORY + '/one/{id}', method: 'get'},
            save: {url: Url.User.Api.VIEW_PAGE_CATEGORY + '/add_one', method: 'post'},
            buttons: [{
                text: '保存',
                iconCls: 'iconfont icon-save',
                handler: expressui.dialog.add,
                reload: [{type: 'treegrid', selector: '#viewPageCategory'}, {
                    type: 'datagrid',
                    selector: '#viewPage',
                    data: []
                }, {type: 'datagrid', selector: '#viewPageComponent', data: []}],
                success: '新增成功'
            }, {
                text: '关闭',
                iconCls: 'iconfont icon-close',
                handler: expressui.dialog.close
            }]
        });
    }

    function viewPageCategoryEditDialog() {
        var one = $('#viewPageCategory').treegrid(expressui.grid.getCheckedOneOrShowAlert);
        if (one) {
            $('#viewPageCategoryEditDialog').dialog(expressui.dialog.create, {
                title: '编辑视图页面分类',
                grid: {type: 'treegrid', selector: '#viewPageCategory'},
                href: Url.User.Page.VIEW_PAGE_CATEGORY + '/edit_dialog',
                get: {url: Url.User.Api.VIEW_PAGE_CATEGORY + '/one/{id}', method: 'get'},
                save: {url: Url.User.Api.VIEW_PAGE_CATEGORY + '/save_one', method: 'post'},
                buttons: [{
                    text: '保存',
                    iconCls: 'iconfont icon-save',
                    handler: expressui.dialog.save,
                    reload: [{type: 'treegrid', selector: '#viewPageCategory'}, {
                        type: 'datagrid',
                        selector: '#viewPage',
                        data: []
                    }, {type: 'datagrid', selector: '#viewPageComponent', data: []}],
                    success: '保存成功'
                }, {
                    text: '关闭',
                    iconCls: 'iconfont icon-close',
                    handler: expressui.dialog.close
                }]
            });
        }
    }

    function viewPageCategoryDeleteAll() {
        $('#viewPageCategory').treegrid(expressui.grid.postCheckedLessOneOrShowAlert, {
            url: Url.User.Api.VIEW_PAGE_CATEGORY + '/delete_all',
            method: 'post',
            success: '删除成功',
            reload: [{type: 'treegrid', selector: '#viewPageCategory'}, {
                type: 'datagrid',
                selector: '#viewPage',
                data: []
            }, {type: 'datagrid', selector: '#viewPageComponent', data: []}],
        });
    }

    function viewPageAddDialog() {
        var viewPageCategory = $('#viewPageCategory').treegrid(expressui.grid.getCheckedOneOrShowAlert, '请勾选要操作的视图页面分类');
        if (!viewPageCategory) {
            return;
        }

        $('#viewPageAddDialog').dialog(expressui.dialog.create, {
            title: '新增视图页面',
            grid: {type: 'treegrid', selector: '#viewPageCategory'},
            href: Url.User.Page.VIEW_PAGE + '/add_dialog',
            get: {url: Url.User.Api.VIEW_PAGE + '/one/{id}', method: 'get'},
            save: {url: Url.User.Api.VIEW_PAGE + '/add_one', method: 'post'},
            buttons: [{
                text: '保存',
                iconCls: 'iconfont icon-save',
                handler: expressui.dialog.add,
                reload: [{type: 'datagrid', selector: '#viewPage'}, {type: 'datagrid', selector: '#viewPageComponent', data: []}],
                success: '新增成功'
            }, {
                text: '关闭',
                iconCls: 'iconfont icon-close',
                handler: expressui.dialog.close
            }]
        });
    }

    function viewPageEditDialog() {
        var one = $('#viewPage').datagrid(expressui.grid.getCheckedOneOrShowAlert);
        if (one) {
            $('#viewPageEditDialog').dialog(expressui.dialog.create, {
                title: '编辑视图页面分类',
                grid: {type: 'datagrid', selector: '#viewPage'},
                href: Url.User.Page.VIEW_PAGE + '/edit_dialog',
                get: {url: Url.User.Api.VIEW_PAGE + '/one/{id}', method: 'get'},
                save: {url: Url.User.Api.VIEW_PAGE + '/save_one', method: 'post'},
                buttons: [{
                    text: '保存',
                    iconCls: 'iconfont icon-save',
                    handler: expressui.dialog.save,
                    reload: [{type: 'datagrid', selector: '#viewPage'}, {
                        type: 'datagrid',
                        selector: '#viewPageComponent',
                        data: []
                    }],
                    success: '保存成功'
                }, {
                    text: '关闭',
                    iconCls: 'iconfont icon-close',
                    handler: expressui.dialog.close
                }]
            });
        }
    }

    function viewPageDeleteAll() {
        $('#viewPage').datagrid(expressui.grid.postCheckedLessOneOrShowAlert, {
            url: Url.User.Api.VIEW_PAGE + '/delete_all',
            method: 'post',
            success: '删除成功',
            reload: [{type: 'datagrid', selector: '#viewPage'}, {
                type: 'datagrid',
                selector: '#viewPageComponent',
                data: []
            }]
        });
    }

    /**
     * 关联 API 对话框
     */
    function viewPageApiDialog() {
        var one = $('#viewPage').datagrid(expressui.grid.getCheckedOneOrShowAlert);
        if (one) {
            $('#viewPageApiDialog').dialog(expressui.dialog.create, {
                title: '关联 API',
                grid: {type: 'datagrid', selector: '#viewPage'},
                href: Url.User.Page.VIEW_PAGE_API + '/view_page_api',
                width: 850,
                height: 450,
                buttons: [{
                    text: '关闭',
                    iconCls: 'iconfont icon-close',
                    handler: expressui.dialog.close
                }]
            });
        }
    }

    function viewPageComponentAddDialog() {
        var one = $('#viewPage').datagrid(expressui.grid.getCheckedOneOrShowAlert);
        if (!one) {
            return;
        }

        $('#viewPageComponentAddDialog').dialog(expressui.dialog.create, {
            title: '新增视图页面组件',
            grid: {type: 'datagrid', selector: '#viewPage'},
            href: Url.User.Page.VIEW_PAGE_COMPONENT + '/add_dialog',
            get: {url: Url.User.Api.VIEW_PAGE_COMPONENT + '/one/{id}', method: 'get'},
            save: {url: Url.User.Api.VIEW_PAGE_COMPONENT + '/add_one', method: 'post'},
            buttons: [{
                text: '保存',
                iconCls: 'iconfont icon-save',
                handler: expressui.dialog.add,
                reload: [{type: 'datagrid', selector: '#viewPageComponent'}],
                success: '新增成功'
            }, {
                text: '关闭',
                iconCls: 'iconfont icon-close',
                handler: expressui.dialog.close
            }]
        });
    }

    function viewPageComponentEditDialog() {
        var one = $('#viewPageComponent').datagrid(expressui.grid.getCheckedOneOrShowAlert);
        if (one) {
            $('#viewPageComponentEditDialog').dialog(expressui.dialog.create, {
                title: '编辑视图页面组件',
                grid: {type: 'datagrid', selector: '#viewPageComponent'},
                href: Url.User.Page.VIEW_PAGE_COMPONENT + '/edit_dialog',
                get: {url: Url.User.Api.VIEW_PAGE_COMPONENT + '/one/{id}', method: 'get'},
                save: {url: Url.User.Api.VIEW_PAGE_COMPONENT + '/save_one', method: 'post'},
                buttons: [{
                    text: '保存',
                    iconCls: 'iconfont icon-save',
                    handler: expressui.dialog.save,
                    reload: [{type: 'datagrid', selector: '#viewPageComponent'}],
                    success: '保存成功'
                }, {
                    text: '关闭',
                    iconCls: 'iconfont icon-close',
                    handler: expressui.dialog.close
                }]
            });
        }
    }

    function viewPageComponentDeleteAll() {
        $('#viewPageComponent').datagrid(expressui.grid.postCheckedLessOneOrShowAlert, {
            url: Url.User.Api.VIEW_PAGE_COMPONENT + '/delete_all',
            method: 'post',
            success: '删除成功',
            reload: {type: 'datagrid', selector: '#viewPageComponent'}
        });
    }

    /**
     * 关联 API 对话框
     */
    function viewPageComponentApiDialog() {
        var one = $('#viewPageComponent').datagrid(expressui.grid.getCheckedOneOrShowAlert);
        if (!one) {
            return;
        }
        $('#viewPageComponentApiDialog').dialog(expressui.dialog.create, {
            title: '关联 API',
            grid: {type: 'datagrid', selector: '#viewPageComponent'},
            href: Url.User.Page.VIEW_PAGE_COMPONENT_API + '/view_page_component_api',
            width: 800,
            height: 420,
            buttons: [{
                text: '关闭',
                iconCls: 'iconfont icon-close',
                handler: expressui.dialog.close
            }]
        });
    }

</script>
</body>
</html>